<template>
  <view class="profile-page">
    <view class="profile-header">
      <view class="avatar">
        <image
          src="/static/default-avatar.png"
          mode="aspectFill"
          class="avatar-image"
        />
      </view>
      <text class="username">用户</text>
    </view>

    <view class="menu-list">
      <view class="menu-item" @click="goToFavorites">
        <text class="menu-label">我的收藏</text>
        <text class="menu-value">{{ favoritesCount }}</text>
        <text class="menu-arrow">></text>
      </view>
      <view class="menu-item" @click="goToHistory">
        <text class="menu-label">浏览历史</text>
        <text class="menu-value">{{ historyCount }}</text>
        <text class="menu-arrow">></text>
      </view>
      <view class="menu-item" @click="showSettings">
        <text class="menu-label">设置</text>
        <text class="menu-arrow">></text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from "vue";
import { useImageStore } from "@/stores/image";

const imageStore = useImageStore();
const favoritesCount = computed(() => imageStore.favorites.length);
const historyCount = computed(() => imageStore.viewHistory.length);

function goToFavorites() {
  uni.switchTab({
    url: "/pages/favorites/favorites",
  });
}

function goToHistory() {
  uni.navigateTo({
    url: "/pages/history/history",
  });
}

function showSettings() {
  uni.navigateTo({
    url: "/pages/settings/settings",
  });
}
</script>

<style scoped>
.profile-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: calc(
    50px + env(safe-area-inset-bottom)
  ); /* 为 tabbar 留出空间 */
}

.profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 0 40rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 20rpx;
}

.avatar-image {
  width: 100%;
  height: 100%;
}

.username {
  font-size: 32rpx;
  color: #333;
}

.menu-list {
  background-color: #fff;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 30rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.menu-label {
  flex: 1;
  font-size: 32rpx;
  color: #333;
}

.menu-value {
  font-size: 28rpx;
  color: #999;
  margin-right: 20rpx;
}

.menu-arrow {
  font-size: 32rpx;
  color: #ccc;
}
</style>
